<template>
    <div>
        <el-card shadow="never" class="mb-3">
            <p class="title">自动回复设置</p>
            <div class="dis" style="margin-top: 35px;">
                <div class="sm_title">生效时间</div>
                <el-radio-group v-model="resetFrorm.effectiveType">
                    <el-radio :value="1" size="large">全天</el-radio>
                    <el-radio :value="2" size="large">时间段
                    </el-radio>
                </el-radio-group>
                <div style="width: 400px;margin-left: 32px;">
                    <el-time-picker :disabled="resetFrorm.effectiveType=== 1" v-model="effectiveTimes" is-range range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" :format="'HH:mm'" :value-format="'HH:mm'" />
                </div>
            </div>
            <div class="dis" style="margin-top: 40px;">
                <div class="sm_title">是否启用 </div>
                <el-radio-group v-model="resetFrorm.isEnable">
                    <el-radio :value="1" size="large">启用</el-radio>
                    <el-radio :value="0" size="large">停用</el-radio>
                </el-radio-group>
            </div>
            <div class="content_header">
                <p class="title">消息内容</p>
                <el-button @click="openDialog">模板库</el-button>
            </div>
            <el-input :maxlength="200" v-model="resetFrorm.msgContent" style="width: 100%;margin-top: 24px;" :rows="10" type="textarea"
                placeholder="请输入自动回复消息内容" />
            <div style="display: flex; justify-content: center;margin-top: 30px;">
                <el-button type="primary" v-permission="'sys:sensitiveword:btn:edit'"  @click="updateRules">保存</el-button>
            </div>
        </el-card>
        <AddOrUpdateForStaff
        v-if="showDialog"
        v-model:dialogVisible="showDialog"
        ref="addOrUpdateRef"
        @choose="getMsg"
      />
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import AddOrUpdateForStaff from '@/views/automatic/setting/components/add-or-update/index.vue';
defineOptions({ name: 'Sensitiveword' });
import { userReplyRuleEdit, userReplyRuleGet,userReplyRuleAdd } from "@/api/automatic/index";
const effectiveTimes = ref(null)
const showDialog = ref(false)
const resetFrorm = ref({
    id: 0,
    effectiveType: 1,
    effectiveStartTime: "",
    effectiveEndTime: "",
    isEnable: 0,
    msgContent: ""
})
userReplyRuleGet().then(res => {
    if (res.data) {
        Object.assign(resetFrorm.value, res.data)
        effectiveTimes.value = [resetFrorm.value.effectiveStartTime, resetFrorm.value.effectiveEndTime]
    }
})
const updateRules = () => {
    if(resetFrorm.value.effectiveType===2 && (!effectiveTimes.value || !effectiveTimes.value[0]  )) {
        ElMessage.error('请选择时间段')
        return
    }
    if(!resetFrorm.value.msgContent){
        ElMessage.error('请填写自动回复消息内容')
        return
    }
    if(effectiveTimes.value) {
        resetFrorm.value.effectiveStartTime = effectiveTimes.value[0]
        resetFrorm.value.effectiveEndTime = effectiveTimes.value[1]
    } else {
        resetFrorm.value.effectiveStartTime =  ''
        resetFrorm.value.effectiveEndTime = ''
    }
    console.log(resetFrorm.value,effectiveTimes.value);
    if(resetFrorm.value.id) {
        // 修改
        userReplyRuleEdit(resetFrorm.value).then((res:any) => {
            console.log(res);
            if(res.code===2000) {
                ElMessage.success('修改成功')
            }
            
        })
    } else {
        userReplyRuleAdd(resetFrorm.value).then((res:any)=> {
            if(res.code===2000) {
                ElMessage.success('修改成功')
            }
            
        })
    }
}
const openDialog = ()=> {
    showDialog.value = true
}
const getMsg = (row:any)=> {
    showDialog.value = false
    if(row) {
        resetFrorm.value.msgContent  = row.msgContent
    }
}
</script>

<style lang="scss" scoped>
.title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 700;
    font-size: 18px;
    color: #333333;
    line-height: 25px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.content_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dis {
    display: flex;
    align-items: center;
    margin-bottom: 50px;

    .sm_title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-right: 30px;
    }
}
</style>